<template>
	<view class="content">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			@emptyclick="emptyClick">
			<view v-for="item in myHotelManageList" :key="item.id">
				<view class="title-box ss-flex ss-col-center ss-row-between ss-p-b-30">
					<view class="ss-flex title-text" @tap="handleToChangeList(item.hotelId)">
						<u-icon name="tags" size="18"></u-icon>
						{{ item.name }}
					</view>
					<button class="ss-reset-button more-btn" @tap="handleToRoomList(item.hotelId)">
						查看更多
						<text class="cicon-forward"></text>
					</button>
				</view>
				<scroll-view class="scroll-view-item_H ss-p-l-30 ss-p-r-30" scroll-x="true">
					<view class="goods-item-box ss-flex  ss-p-b-20" v-if="item.roomList.length>0">
						<view class="goods-item" v-for="i in item.roomList" :key="i.id">
							<view @tap="handleToRoomDetail(item.hotelId,i.id)">
								
								<view class="groupon-tag ss-flex ss-row-center" v-if="i.status!=='0'">
									<view class="tag-icon">{{formatStatus(i.status)}}</view>
								</view>
								
								<image class="goods-img " :src="i.roomImage|| '/static/images/default.png'" mode="aspectFill"></image>
								<view class="goods-title ss-line-1">{{ i.roomName }}</view>
								<view class="ss-m-t-10 text-red ss-font-30"><text class="ss-font-22">￥</text>{{ i.price }}</view>
								
							</view>
						</view>
					</view>
					<view v-else class="goods-item-box ss-flex ss-flex-wrap ss-p-b-20">
						<view class="goods-item">
							 <u-empty width="80px" height="80px" text="暂无房源" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
						</view>
						<view class="goods-item">
							 <u-empty width="80px" height="80px" text="暂无房源" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
						</view>
						<view class="goods-item">
							 <u-empty width="80px" height="80px" text="暂无房源" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>
						</view>
					</view>
				</scroll-view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getMyHotelManageList
	} from "@/api/system/hotel"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {

			return {
				upOption: {
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '没有更多数据了',
					empty: {
						btnText: "去关注",
						tip: '暂无酒店数据', // 提示
						icon: 'https://cdn.uviewui.com/uview/empty/list.png',
					}
				},
				searchParams: {
					pageSize: '10',
					pageNum: '1'
				},
				myHotelManageList: []
			}
		},
		methods: {
			upCallback(page) {
				this.searchParams.pageNum = page.num; // 页码, 默认从1开始
				this.searchParams.pageSize = page.size; // 页长, 默认每页10条
				getMyHotelManageList(this.searchParams).then(response => {

					// 接口返回的当前页数据列表 (数组)
					let curPageData = response.rows;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = response.total;

					//设置列表数据
					if (page.num == 1) this.myHotelManageList = []; //如果是第一页需手动置空列表
					this.myHotelManageList = this.myHotelManageList.concat(curPageData); //追加新数据

					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endBySize(curPageLen, totalPage);

					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//this.mescroll.endBySize(curPageLen, totalSize); 

					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					//this.mescroll.endSuccess(curPageLen, hasNext); 

					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
					//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					//如果传了hasNext,则翻到第二页即可显示无更多数据.
					//this.mescroll.endSuccess(curPageLen);

					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					// 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
				}).catch(() => {
					this.mescroll.endErr()
				})
			},

			emptyClick() {
				this.$tab.switchTab('/pages/hotel/manage/index')
			},
			handleToRoomList(hotelId) {
				this.$tab.navigateTo(`/pages/hotel/room/index?hotelId=${hotelId}`)
			},
			
			handleToChangeList(hotelId) {
				this.$tab.navigateTo(`/pages/hotel/change/index?hotelId=${hotelId}`)
			},
			
			handleToRoomDetail(hotelId,roomId) {
				this.$tab.navigateTo(`/pages/hotel/change/index?hotelId=${hotelId}&roomId=${roomId}`)
				// this.$tab.navigateTo(`/pages/hotel/room/detail?hotelId=${hotelId}&roomId=${roomId}`)
			},
			formatStatus(status){
				if(status==='1'){
					return '涨价';
				}
				else if(status==='2'){
					return '降价';
				}
				else if(status==='3'){
					return '补房';
				}
				else if(status==='4'){
					return '满房';
				}
				else if(status==='5'){
					return '上架';
				}
				else if(status==='6'){
					return '下架';
				}
			}
		},
		onLoad() {

		},
	}
</script>

<style lang="scss" scoped>
	
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 36rpx;
		}
		
	.groupon-tag {
		position: absolute;
		left: 0px;
		top: 0;
		z-index: 2;
		width: 68rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
		border-radius: 10rpx 0px 10rpx 0px;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 32rpx;
	}
	
	.title-box {
		.title-text {
			padding-left: 30rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}

		.more-btn {
			padding-right: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.goods-item {
		width: calc((100% - 20px) / 3);
		margin-right: 10px;
		margin-bottom: 10px;
		position: relative;

		display: flex;
		justify-content: center;
		align-items: center;

		.goods-img {
			width: calc((100vw - 140px) / 3);
			height: calc((100vw - 140px) / 3);
		}

		.goods-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}

		.goods-price {
			color: $red;
			line-height: 40rpx;
		}
	}
</style>